<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="600px">
        <div class="loginForm" style="height: 60%;margin-left: 200px;margin-top: 200px">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>账号登录</span>
                <el-button class="button" style="margin-left: 30px" text>其他方式登录</el-button>
              </div>
            </template>
            <div class="text item ">
              <LoginForm/>
            </div>
          </el-card>
        </div>
      </el-aside>
      <el-main>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import LoginForm from "@/components/login/LoginForm";

</script>

<style scoped>
.loginForm{
  margin: 80px auto;
}
.common-layout{
  background: url('../assets/img/img.png') center no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: 750px;
}
.box-card{
  opacity: 0.7;
}
</style>